<template>  <!--该页面为从设备探索进入的历史探索测试记录页面-->
	<div class="info">
    <el-card v-for="(item,index) in monitorData " :key="index" shadow="hover" class="dataCard">
      <el-row v-if="item.paramTitle !== ''"><div style="float: left">{{item.paramTitle}}</div><i class="el-icon-s-data" style="float: right;font-size: 18px" @click="displayInterface(index)"></i></el-row>
      <ve-line v-if="monitorData[index].showSign === 'waveform'" :data="item.dataContent[item.dataContent.length-1]" style="width: 100%" :legend-visible="false" :extend="chartExtend" :judge-width="true" :height="height" :colors="colors" :grid="grid"></ve-line>
      <ve-line height="360px" :data="res" :extend="chartSetting" :mark-line="markLine" :mark-point="markPoint"></ve-line>
    </el-card>
  </div>
</template>
<script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 引入需要用到的第三方nodejs库，如日期计算等
// 需要先通过npm安装第三方组件包，然后在代码中使用
// npm install xxx :settings="chartSettings"
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import moment from 'moment';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
	data() {
    //图形设置
    this.chartExtend = {
      series:{
        symbol: "none",//取消折线图上的小圆点
      },
      'xAxis.0.axisLabel.show': false,//x轴标签不显示
    }
    this.colors = ['#FF0000']
    this.height = '235px'
    this.grid = {
      top: 20,
    }
		return {
      chartSetting: {
                itemStyle: { // 远点颜色
                    color: "#5470C6"
                },
                dataZoom: [{  // 可缩放
                }, {
                type: 'inside'
                }],
                lineStyle:{ // 折线颜色
                    color:'#5470C6'
                },
                legend:{ // 标识
                    show:false,
                },
                xAxis:{
                    boundaryGap: false, // 从x轴原点开始
                    axisLine:{
                        show:true, // 显示x轴
                    },
                    axisTick:{
                        show:true, // x轴每项的小竖线
                        alignWithLabel: true // x轴中间显示还是小竖线显示
                    },
                // axisLabel: {
                //     margin: 15,//距离
                //     interval: 0,
                //     rotate: 30,//倾斜度
                //     },
                    triggerEvent: true
                }
            },
            markLine: { // 平均值
                data: [{
                    type: 'average',
                    name: '平均值',
                    label: {
                    show: 'true',
                    position: 'insideEndTop',
                    color: '#5470C6',
                    fontSize: 15
                },
                },
                
                ]
            },
            markPoint: {
                data: [{
                        type: 'max',
                        name: '最大值',
                        itemStyle: {
                            color: '#5470C6',
                        }
                    },
                    {
                        type: 'min',
                        name: '最小值',
                        itemStyle: {
                            color: '#5470C6',
                        }
                    },
                ]
            },
            res: {
              columns: ["次数", "试验电压"],
              rows: [{次数: 1, 试验电压: 2.34}, {次数: 2, 试验电压: 2.01}]
            },
      monitorData: [{
        displayCount: 0,  //切换显示指标
        showSign: 'waveform',
        text: '', //文字按钮
        stepName: '读取波形',     //工步名称用于对应数据的显示
        paramTitle: '读取波形',   //显示检测名称
        dataContent: [{
          columns: ['顺序', '数值'],
          rows: []
        }]   //测试数据
      }]
		};
	},
	methods: {
    getData(x){
      x /= 10;
      return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
    },
    updatadata(){
      for (let i = 0; i <= 375; i++) {
        let row = {
          '顺序': i, 
          '数值': this.getData(i)
        }
        this.monitorData[0].dataContent[0].rows.push(row);
      }
    }
  },
	mounted() {
    this.updatadata();
	}
};
</script>
<style lang="scss" scoped>
@import "./Demo.scss";
</style>